<template lang="pug">
  v-card
    v-toolbar(color="purple darken-4" dark dense)
      v-toolbar-title 清单
      v-spacer
      v-toolbar-items
        v-btn(text @click="deleteAssets") 删除
        v-btn(text @click="showPicker") 添加
        v-btn(text @click="addExtraFee") 添加自定义费用

    v-card-text
      v-card-title 资产
      v-divider
      Picker(ref="picker" @addItem="onAddItem")
      ExtraFeeGenerator(ref="extraFee")
      AssetItems(ref="assetItemsTable")
    v-card-text
      v-card-title 资产组合
      v-divider
      OrderBundles(ref="orderBundles")


    v-card-actions
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import Picker from './order_form_item_picker.vue'
  import AssetItems from './order_asset_items.vue'
  import OrderBundles from './order_bundles.vue'
  import ExtraFeeGenerator from './order_form_extra_fee_generator.vue'

  export default (Vue as VueConstructor<Vue & {
    $refs: {
      picker: Picker,
      assetItemsTable: AssetItems,
      extraFee: ExtraFeeGenerator
    }
  }>).extend({
    name: 'order_form_items',
    components: { Picker, AssetItems, ExtraFeeGenerator, OrderBundles },
    methods: {
      showPicker() {
        this.$refs.picker.toggle()
      },
      addExtraFee() {
        this.$refs.extraFee.toggle()
      },
      deleteAssets() {
        this.$confirm({
          body: '确认删除？'
        }).then(this.$refs.assetItemsTable.deleteSelected)
      },
      onAddItem(item: any) {
      }
    }
  })
</script>